<template>
	<view>
		<u-navbar placeholder fixed autoBack title="统计分析">
			<!-- 甲方取消 -->
			<!-- <view slot="right" @click="search" v-if="current == 6 || current == 7"><u-icon name="search" size="20" color="#162233"></u-icon></view> -->
		</u-navbar>
		<view class="u-border-bottom position" style="background-color: #FFFFFF;">
			<u-tabs
				:list="tabs"
				:activeStyle="{
					color: '#21A5F3'
				}"
				:current="current"
				@change="setCurrent"
			></u-tabs>
		</view>
		<u-gap height="44px" bgColor="#FBFCFC"></u-gap>
		<view class="d-p-30">
			<template v-if="id == 0">
				<view class="card d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">单位统计</view>
						<view class="d-font-26 d-flex" style="color: #505355;">
							<text class="d-m-r-10" style="position: relative;top: -2rpx;">按项目类型</text>
							<u-icon name="arrow-down" size="26rpx" color="#505355"></u-icon>
						</view>
					</view>
					<enterpriseChart :companies="companies"></enterpriseChart>
				</view>
			</template>
			<template v-else-if="id == 1">
				<view class="card d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">项目分布情况</view>
						<view class="d-font-26 d-flex" style="color: #ADB4BD;"><text style="position: relative;top: -2rpx;">单位：个</text></view>
					</view>
					<appChart :project="project"></appChart>
				</view>
			</template>
			<template v-else-if="id == 2">
				<view class="d-font-32" style="font-weight: bold;color: #323334;">专户统计</view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">开户情况统计</view>
						<view class="d-font-26 d-flex" style="color: #ADB4BD;"><text>单位：个</text></view>
					</view>
					<openChart :account="account"></openChart>
				</view>
				<view class="card d-p-30 d-m-t-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">开户银行</view>
						<!-- <view class="d-font-26 d-flex" style="color: #ADB4BD;"><text>单位：个</text></view> -->
					</view>
					<bankChart :inc="inc"></bankChart>
				</view>
			</template>
			<template v-else-if="id == 3">
				<view class="d-font-32" style="font-weight: bold;color: #323334;">综合统计</view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工人情况</view>
						<text class="d-font-26" style="color: #8E9291;">单位: 人</text>
					</view>
					<view class="d-flex d-m-t-20 d-font-24 d-text-center" style="color: #4E5C70;">
						<view class="d-flex-1">
							<view>实名总人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.staffs : 0 }}</view>
						</view>
						<view class="d-flex-1">
							<view>进场总人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.istaffs : 0 }}</view>
						</view>
						<view class="d-flex-1">
							<view>离场工人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.ostaffs : 0 }}</view>
						</view>
						<view class="d-flex-1">
							<view>考勤工人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.atdStaffs : 0 }}</view>
						</view>
					</view>
				</view>
				<view class="card d-p-30 d-m-t-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工人分布情况</view>
						<view class="d-font-26 d-flex" style="color: #ADB4BD;"><text style="position: relative;top: -2rpx;">单位：人</text></view>
					</view>
					<memberChart :count="count"></memberChart>
				</view>
			</template>
			<template v-else-if="id == 4">
				<view class="d-font-32" style="font-weight: bold;color: #323334;">综合统计</view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工人情况</view>
						<text class="d-font-26" style="color: #8E9291;">单位: 人</text>
					</view>
					<view class="d-flex d-m-t-20 d-font-24 d-text-center" style="color: #4E5C70;">
						<view class="d-flex-1">
							<view>实名总人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.staffs : 0 }}</view>
						</view>
						<view class="d-flex-1">
							<view>进场总人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.istaffs : 0 }}</view>
						</view>
						<view class="d-flex-1">
							<view>离场工人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.ostaffs : 0 }}</view>
						</view>
						<view class="d-flex-1">
							<view>考勤工人数</view>
							<view class="d-m-t-10" style="color: #162233;font-weight: bold;font-size: 42rpx;">{{ ssu ? ssu.atdStaffs : 0 }}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else-if="id == 5">
				<view class="d-font-32" style="font-weight: bold;color: #323334;">综合统计</view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工资发放情况</view>
						<view class="d-font-26 d-flex" style="color: #ADB4BD;"><text>单位：万元</text></view>
					</view>
					<wagesChart :count="wages_chart"></wagesChart>
				</view>
				<view class="card d-p-30 d-m-t-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">本月工资发放情况</view>
						<!-- <view class="d-font-26 d-flex" style="color: #ADB4BD;"><text>单位：人</text></view> -->
					</view>
					<wagesLineChart :nation="nation"></wagesLineChart>
				</view>
			</template>
			<template v-else-if="id == 6">
				<view class="d-flex"><text class="d-font-36 d-flex-1" style="font-weight: bold;">预警情况统计</text></view>
				<view class="d-m-t-30 card d-p-30 d-flex">
					<view class="d-flex-1 d-flex">
						<u--image width="80rpx" height="80rpx" src="/static/icon/icon-84.png"></u--image>
						<view class="d-p-l-20">
							<view style="font-weight: bold;font-size: 42rpx;color: #162233;">{{ info ? info.mvalue : 0 }}</view>
							<view class="d-font-24" style="color: #4E5C70;">本月预警</view>
						</view>
					</view>
					<view class="d-flex-1 d-flex">
						<u--image width="80rpx" height="80rpx" src="/static/icon/icon-85.png"></u--image>
						<view class="d-p-l-20">
							<view style="font-weight: bold;font-size: 42rpx;color: #162233;">{{ info ? info.value : 0 }}</view>
							<view class="d-font-24" style="color: #4E5C70;">累计预警</view>
						</view>
					</view>
				</view>

				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-30">
						<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">预警情况统计</view>
						<text class="d-font-26" style="color: #8E9291;">单位: 个</text>
					</view>
					<warningChart :count="warning_chart"></warningChart>
				</view>
			</template>
			<template v-else-if="id == 7">
				<view class="card d-p-30">
					<view class="d-flex"><view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">预警督办</view></view>
					<view class="d-flex d-text-center d-m-t-20">
						<view class="d-flex-1" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">在建项目</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.zjxm : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
						<view class="d-flex-1" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">今日督办</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.jrdb : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
						<view class="d-flex-1" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">本月督办</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.bydb : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
						<view class="d-flex-1" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">历史督办</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.lsdb : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
					</view>
				</view>
				<view class="card d-p-30 d-m-t-30">
					<view class="d-flex"><view class="d-font-30 d-flex-1">本月督办</view></view>
					<view class="d-flex d-text-center d-m-t-20">
						<view class="d-flex-1 u-border-right" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">已督办项目数</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.ydbxms_by : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
						<view class="d-flex-1" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">未督办项目数</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.wdbxms_by : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
					</view>
				</view>
				<view class="card d-p-30 d-m-t-30">
					<view class="d-flex"><view class="d-font-30 d-flex-1">历史督办</view></view>
					<view class="d-flex d-text-center d-m-t-20">
						<view class="d-flex-1 u-border-right" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">已督办项目数</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.ydbxms_ls : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
						<view class="d-flex-1" style="color: #162233;">
							<text class="d-font-24" style="color: #4E5C70;">未督办项目数</text>
							<view>
								<text style="font-size: 52rpx;font-weight: bold;">{{ sup ? sup.wdbxms_ls : 0 }}</text>
								<text class="d-font-20">个</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import enterpriseChart from './components/enterpriseChart.vue';
import appChart from './components/appChart.vue';
import warningChart from './components/warningChart.vue';
import memberChart from './components/memberChart.vue';
import openChart from './components/openChart.vue';
import bankChart from './components/bankChart.vue';
import wagesChart from './components/wagesChart.vue';
import wagesLineChart from './components/wagesLineChart.vue';
import {
	companyStatistics,
	projectDis,
	accountCount,
	accountINC,
	ssuCount,
	staffsdistribute,
	salaryByPtype,
	salaryByNation,
	warningStatistics,
	getWarningChart,
	supervise
} from '../../../common/api.js';
export default {
	components: {
		enterpriseChart,
		appChart,
		warningChart,
		memberChart,
		openChart,
		bankChart,
		wagesChart,
		wagesLineChart
	},
	data() {
		return {
			tabs: [
				// { id: 0, name: '单位' },
				{ id: 1, name: '项目' },
				{ id: 2, name: '专户' },
				{ id: 3, name: '人员' },
				{ id: 4, name: '考勤' },
				{ id: 5, name: '工资' },
				{ id: 6, name: '预警' },
				{ id: 7, name: '督办' }
			],
			current: 1,
			id: 2,
			companies: null,
			project: null,
			account: null,
			inc: null,
			ssu: null,
			count: null,
			wages_chart: null,
			nation: null,
			info: null,
			warning_chart: null,
			sup: null
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		setCurrent(e) {
			this.current = e.index;
			this.id = this.tabs[e.index].id;
		},
		init() {
			// 单位统计
			companyStatistics({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.companies = e.data;
			});
			// 项目情况
			projectDis({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.project = e.data;
			});
			// 开户情况
			accountCount({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.account = e.data;
			});
			// 开户银行 todo 未对接
			accountINC({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.inc = e.data;
			});
			// 综合统计
			// 工人情况
			ssuCount({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.ssu = e.data;
			});
			// 工人分布情况
			staffsdistribute({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.count = e.data;
			});
			// 工资发放情况
			salaryByPtype({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.wages_chart = e.data;
			});
			// 本月工资发放情况
			salaryByNation({
				params: {
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.nation = e.data;
			});
			// 预警情况统计
			warningStatistics({
				params: {
					deptId: this.$user.deptId,
					...this.queryParams
				}
			}).then(e => {
				this.info = e.data;
			});
			// 预警情况统计2
			getWarningChart({
				params: {
					deptId: this.$user.deptId,
					...this.queryParams
				}
			}).then(e => {
				this.warning_chart = e.data;
			});
			// 督办统计
			supervise({
				params: {
					deptId: this.$user.deptId,
					...this.queryParams
				}
			}).then(e => {
				this.sup = e.data;
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/count/search'
			});
		}
	}
};
</script>

<style lang="scss">
.position {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9999;
}
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
		.sub-title {
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 22rpx;
				background: #13a4fe;
				border-radius: 4rpx;
				bottom: 0;
				margin: auto;
			}
		}
	}
}
</style>
